<!doctype html>
<html>
<head>
    <base href="/web/<%=path%>"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>菜单管理</title>
    <link rel="shortcut icon" href="/web/favicon.ico">
    <link href="/web/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/web/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/web/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20210202" rel="stylesheet"/>
    <link href="/web/css/animate.min.css" rel="stylesheet"/>
    <link href="/web/css/style.css?v=20200903" rel="stylesheet"/>
    <link href="/web/andy/css/ry-ui.css?v=4.6.1" rel="stylesheet"/>
    <a id="scroll-up" href="javascript:void(0);" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
    <script src="/web/js/jquery.min.js"></script>
    <script src="/web/js/bootstrap.min.js"></script>
    <!-- bootstrap-table 表格插件 -->
    <script src="/web/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/web/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20210202"></script>
    <script src="/web/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
    <!-- jquery-validate 表单验证插件 -->
    <script src="/web/ajax/libs/validate/jquery.validate.min.js"></script>
    <script src="/web/ajax/libs/validate/messages_zh.min.js"></script>
    <script src="/web/ajax/libs/validate/jquery.validate.extend.js"></script>
    <!-- jquery-validate 表单树插件 -->
    <script src="/web/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <!-- 遮罩层 -->
    <script src="/web/ajax/libs/blockUI/jquery.blockUI.js"></script>
    <script src="/web/ajax/libs/iCheck/icheck.min.js"></script>
    <script src="/web/ajax/libs/layer/layer.min.js"></script>
    <script src="/web/ajax/libs/layui/layui.js"></script>
    <script src="/web/andy/js/common.js?v=4.6.1"></script>
    <script src="/web/andy/js/andy-ui.js?v=4.6.1"></script>
    <script src="/webjars/vue/2.6.14/vue.min.js"></script>
    <link href="/web/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>
    <script src="/web/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
</head>
<body class="gray-bg" >
<div id="container">
<div class="container-div" >
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="menu-form">
                <div class="select-list">
                    <ul>
                        <li>
                            菜单名称：<input type="text" name="menuName" value="" v-model="param.menuName"/>
                        </li>
                        <li>
                            菜单状态：<select v-model="param.visible">
                            <option value="" selected>所有</option>
                            <option v-for="item in types" :value="item.id">{{item.name}}</option>
                        </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.treeTable.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" @click="add();">
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-primary" @click="edit();">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-info" id="expandAllBtn">
                <i class="fa fa-exchange"></i> 展开/折叠
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-tree-table"></table>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="addForm" style="display: none">
    <form class="form-horizontal m" id="form-menu-add">
        <input id="treeId" name="parentId" type="hidden" v-model="menu.parentId" />
        <div class="form-group">
            <label class="col-sm-3 control-label">上级菜单：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input class="form-control" v-model="menu.parentName" type="text" @click="selectMenuTree()" id="treeName" readonly="true" >
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">菜单类型：</label>
            <div class="col-sm-8">
                <label class="radio-box"  v-for="(mtype,index) in types"> <input type="radio"   name="menuType" :value="mtype.id" v-model="menu.menuType"/> {{mtype.name}} </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">菜单名称：</label>
            <div class="col-sm-8">
                <input v-model="menu.menuName" class="form-control" type="text" name="menuName" id="menuName" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">请求地址：</label>
            <div class="col-sm-8">
                <input id="url" v-model="menu.url" name="url" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">打开方式：</label>
            <div class="col-sm-8">
                <select id="target" name="target" class="form-control m-b" v-model="menu.target">
                    <option value="menuItem">页签</option>
                    <option value="menuBlank">新窗口</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">权限标识：</label>
            <div class="col-sm-8">
                <input id="perms" name="perms" class="form-control" type="text" v-model="menu.perms">
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限标识，如：@RequiresPermissions("")</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">显示排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="orderNum" required v-model="menu.orderNum">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">图标：</label>
            <div class="col-sm-8">
                <input id="icon" name="icon" v-model="menu.icon" class="form-control" type="text" placeholder="选择图标">
                <div class="ms-parent" style="width: 100%;">
                    <div class="icon-drop animated flipInX" style="display: none;max-height:200px;overflow-y:auto">
                        <div>
                            <div class="ico-list">
                                <i class="fa fa-address-book" aria-hidden="true"></i>

                                <i class="fa fa-address-book-o" aria-hidden="true"></i>

                                <i class="fa fa-address-card" aria-hidden="true"></i>

                                <i class="fa fa-address-card-o" aria-hidden="true"></i>

                                <i class="fa fa-adjust" aria-hidden="true"></i>

                                <i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>

                                <i class="fa fa-anchor" aria-hidden="true"></i>

                                <i class="fa fa-archive" aria-hidden="true"></i>

                                <i class="fa fa-area-chart" aria-hidden="true"></i>

                                <i class="fa fa-arrows" aria-hidden="true"></i>

                                <i class="fa fa-arrows-h" aria-hidden="true"></i>

                                <i class="fa fa-arrows-v" aria-hidden="true"></i>

                                <i class="fa fa-asl-interpreting" aria-hidden="true"></i>

                                <i class="fa fa-assistive-listening-systems" aria-hidden="true"></i>

                                <i class="fa fa-asterisk" aria-hidden="true"></i>

                                <i class="fa fa-at" aria-hidden="true"></i>

                                <i class="fa fa-audio-description" aria-hidden="true"></i>

                                <i class="fa fa-automobile" aria-hidden="true"></i>

                                <i class="fa fa-balance-scale" aria-hidden="true"></i>

                                <i class="fa fa-ban" aria-hidden="true"></i>

                                <i class="fa fa-bank" aria-hidden="true"></i>

                                <i class="fa fa-bar-chart" aria-hidden="true"></i>

                                <i class="fa fa-bar-chart-o" aria-hidden="true"></i>

                                <i class="fa fa-barcode" aria-hidden="true"></i>

                                <i class="fa fa-bars" aria-hidden="true"></i>

                                <i class="fa fa-bath" aria-hidden="true"></i>

                                <i class="fa fa-bathtub" aria-hidden="true"></i>

                                <i class="fa fa-battery" aria-hidden="true"></i>

                                <i class="fa fa-battery-0" aria-hidden="true"></i>

                                <i class="fa fa-battery-1" aria-hidden="true"></i>

                                <i class="fa fa-battery-2" aria-hidden="true"></i>

                                <i class="fa fa-battery-3" aria-hidden="true"></i>

                                <i class="fa fa-battery-4" aria-hidden="true"></i>

                                <i class="fa fa-battery-empty" aria-hidden="true"></i>

                                <i class="fa fa-battery-full" aria-hidden="true"></i>

                                <i class="fa fa-battery-half" aria-hidden="true"></i>

                                <i class="fa fa-battery-quarter" aria-hidden="true"></i>

                                <i class="fa fa-battery-three-quarters" aria-hidden="true"></i>

                                <i class="fa fa-bed" aria-hidden="true"></i>

                                <i class="fa fa-beer" aria-hidden="true"></i>

                                <i class="fa fa-bell" aria-hidden="true"></i>

                                <i class="fa fa-bell-o" aria-hidden="true"></i>

                                <i class="fa fa-bell-slash" aria-hidden="true"></i>

                                <i class="fa fa-bell-slash-o" aria-hidden="true"></i>

                                <i class="fa fa-bicycle" aria-hidden="true"></i>

                                <i class="fa fa-binoculars" aria-hidden="true"></i>

                                <i class="fa fa-birthday-cake" aria-hidden="true"></i>

                                <i class="fa fa-blind" aria-hidden="true"></i>

                                <i class="fa fa-bluetooth" aria-hidden="true"></i>

                                <i class="fa fa-bluetooth-b" aria-hidden="true"></i>

                                <i class="fa fa-bolt" aria-hidden="true"></i>

                                <i class="fa fa-bomb" aria-hidden="true"></i>

                                <i class="fa fa-book" aria-hidden="true"></i>

                                <i class="fa fa-bookmark" aria-hidden="true"></i>

                                <i class="fa fa-bookmark-o" aria-hidden="true"></i>

                                <i class="fa fa-braille" aria-hidden="true"></i>

                                <i class="fa fa-briefcase" aria-hidden="true"></i>

                                <i class="fa fa-bug" aria-hidden="true"></i>

                                <i class="fa fa-building" aria-hidden="true"></i>

                                <i class="fa fa-building-o" aria-hidden="true"></i>

                                <i class="fa fa-bullhorn" aria-hidden="true"></i>

                                <i class="fa fa-bullseye" aria-hidden="true"></i>

                                <i class="fa fa-bus" aria-hidden="true"></i>

                                <i class="fa fa-cab" aria-hidden="true"></i>

                                <i class="fa fa-calculator" aria-hidden="true"></i>

                                <i class="fa fa-calendar" aria-hidden="true"></i>

                                <i class="fa fa-calendar-check-o" aria-hidden="true"></i>

                                <i class="fa fa-calendar-minus-o" aria-hidden="true"></i>

                                <i class="fa fa-calendar-o" aria-hidden="true"></i>

                                <i class="fa fa-calendar-plus-o" aria-hidden="true"></i>

                                <i class="fa fa-calendar-times-o" aria-hidden="true"></i>

                                <i class="fa fa-camera" aria-hidden="true"></i>

                                <i class="fa fa-camera-retro" aria-hidden="true"></i>

                                <i class="fa fa-car" aria-hidden="true"></i>

                                <i class="fa fa-caret-square-o-down" aria-hidden="true"></i>

                                <i class="fa fa-caret-square-o-left" aria-hidden="true"></i>

                                <i class="fa fa-caret-square-o-right" aria-hidden="true"></i>

                                <i class="fa fa-caret-square-o-up" aria-hidden="true"></i>

                                <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>

                                <i class="fa fa-cart-plus" aria-hidden="true"></i>

                                <i class="fa fa-cc" aria-hidden="true"></i>

                                <i class="fa fa-certificate" aria-hidden="true"></i>

                                <i class="fa fa-check" aria-hidden="true"></i>

                                <i class="fa fa-check-circle" aria-hidden="true"></i>

                                <i class="fa fa-check-circle-o" aria-hidden="true"></i>

                                <i class="fa fa-check-square" aria-hidden="true"></i>

                                <i class="fa fa-check-square-o" aria-hidden="true"></i>

                                <i class="fa fa-child" aria-hidden="true"></i>

                                <i class="fa fa-circle" aria-hidden="true"></i>

                                <i class="fa fa-circle-o" aria-hidden="true"></i>

                                <i class="fa fa-circle-o-notch" aria-hidden="true"></i>

                                <i class="fa fa-circle-thin" aria-hidden="true"></i>

                                <i class="fa fa-clock-o" aria-hidden="true"></i>

                                <i class="fa fa-clone" aria-hidden="true"></i>

                                <i class="fa fa-close" aria-hidden="true"></i>

                                <i class="fa fa-cloud" aria-hidden="true"></i>

                                <i class="fa fa-cloud-download" aria-hidden="true"></i>

                                <i class="fa fa-cloud-upload" aria-hidden="true"></i>

                                <i class="fa fa-code" aria-hidden="true"></i>

                                <i class="fa fa-code-fork" aria-hidden="true"></i>

                                <i class="fa fa-coffee" aria-hidden="true"></i>

                                <i class="fa fa-cog" aria-hidden="true"></i>

                                <i class="fa fa-cogs" aria-hidden="true"></i>

                                <i class="fa fa-comment" aria-hidden="true"></i>

                                <i class="fa fa-comment-o" aria-hidden="true"></i>

                                <i class="fa fa-commenting" aria-hidden="true"></i>

                                <i class="fa fa-commenting-o" aria-hidden="true"></i>

                                <i class="fa fa-comments" aria-hidden="true"></i>

                                <i class="fa fa-comments-o" aria-hidden="true"></i>

                                <i class="fa fa-compass" aria-hidden="true"></i>

                                <i class="fa fa-copyright" aria-hidden="true"></i>

                                <i class="fa fa-creative-commons" aria-hidden="true"></i>

                                <i class="fa fa-credit-card" aria-hidden="true"></i>

                                <i class="fa fa-credit-card-alt" aria-hidden="true"></i>

                                <i class="fa fa-crop" aria-hidden="true"></i>

                                <i class="fa fa-crosshairs" aria-hidden="true"></i>

                                <i class="fa fa-cube" aria-hidden="true"></i>

                                <i class="fa fa-cubes" aria-hidden="true"></i>

                                <i class="fa fa-cutlery" aria-hidden="true"></i>

                                <i class="fa fa-dashboard" aria-hidden="true"></i>

                                <i class="fa fa-database" aria-hidden="true"></i>

                                <i class="fa fa-deaf" aria-hidden="true"></i>

                                <i class="fa fa-deafness" aria-hidden="true"></i>

                                <i class="fa fa-desktop" aria-hidden="true"></i>

                                <i class="fa fa-diamond" aria-hidden="true"></i>

                                <i class="fa fa-dot-circle-o" aria-hidden="true"></i>

                                <i class="fa fa-download" aria-hidden="true"></i>

                                <i class="fa fa-drivers-license" aria-hidden="true"></i>

                                <i class="fa fa-drivers-license-o" aria-hidden="true"></i>

                                <i class="fa fa-edit" aria-hidden="true"></i>

                                <i class="fa fa-ellipsis-h" aria-hidden="true"></i>

                                <i class="fa fa-ellipsis-v" aria-hidden="true"></i>

                                <i class="fa fa-envelope" aria-hidden="true"></i>

                                <i class="fa fa-envelope-o" aria-hidden="true"></i>

                                <i class="fa fa-envelope-open" aria-hidden="true"></i>

                                <i class="fa fa-envelope-open-o" aria-hidden="true"></i>

                                <i class="fa fa-envelope-square" aria-hidden="true"></i>

                                <i class="fa fa-eraser" aria-hidden="true"></i>

                                <i class="fa fa-exchange" aria-hidden="true"></i>

                                <i class="fa fa-exclamation" aria-hidden="true"></i>

                                <i class="fa fa-exclamation-circle" aria-hidden="true"></i>

                                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>

                                <i class="fa fa-external-link" aria-hidden="true"></i>

                                <i class="fa fa-external-link-square" aria-hidden="true"></i>

                                <i class="fa fa-eye" aria-hidden="true"></i>

                                <i class="fa fa-eye-slash" aria-hidden="true"></i>

                                <i class="fa fa-eyedropper" aria-hidden="true"></i>

                                <i class="fa fa-fax" aria-hidden="true"></i>

                                <i class="fa fa-feed" aria-hidden="true"></i>

                                <i class="fa fa-female" aria-hidden="true"></i>

                                <i class="fa fa-fighter-jet" aria-hidden="true"></i>

                                <i class="fa fa-file-archive-o" aria-hidden="true"></i>

                                <i class="fa fa-file-audio-o" aria-hidden="true"></i>

                                <i class="fa fa-file-code-o" aria-hidden="true"></i>

                                <i class="fa fa-file-excel-o" aria-hidden="true"></i>

                                <i class="fa fa-file-image-o" aria-hidden="true"></i>

                                <i class="fa fa-file-movie-o" aria-hidden="true"></i>

                                <i class="fa fa-file-pdf-o" aria-hidden="true"></i>

                                <i class="fa fa-file-photo-o" aria-hidden="true"></i>

                                <i class="fa fa-file-picture-o" aria-hidden="true"></i>

                                <i class="fa fa-file-powerpoint-o" aria-hidden="true"></i>

                                <i class="fa fa-file-sound-o" aria-hidden="true"></i>

                                <i class="fa fa-file-video-o" aria-hidden="true"></i>

                                <i class="fa fa-file-word-o" aria-hidden="true"></i>

                                <i class="fa fa-file-zip-o" aria-hidden="true"></i>

                                <i class="fa fa-film" aria-hidden="true"></i>

                                <i class="fa fa-filter" aria-hidden="true"></i>

                                <i class="fa fa-fire" aria-hidden="true"></i>

                                <i class="fa fa-fire-extinguisher" aria-hidden="true"></i>

                                <i class="fa fa-flag" aria-hidden="true"></i>

                                <i class="fa fa-flag-checkered" aria-hidden="true"></i>

                                <i class="fa fa-flag-o" aria-hidden="true"></i>

                                <i class="fa fa-flash" aria-hidden="true"></i>

                                <i class="fa fa-flask" aria-hidden="true"></i>

                                <i class="fa fa-folder" aria-hidden="true"></i>

                                <i class="fa fa-folder-o" aria-hidden="true"></i>

                                <i class="fa fa-folder-open" aria-hidden="true"></i>

                                <i class="fa fa-folder-open-o" aria-hidden="true"></i>

                                <i class="fa fa-frown-o" aria-hidden="true"></i>

                                <i class="fa fa-futbol-o" aria-hidden="true"></i>

                                <i class="fa fa-gamepad" aria-hidden="true"></i>

                                <i class="fa fa-gavel" aria-hidden="true"></i>

                                <i class="fa fa-gear" aria-hidden="true"></i>

                                <i class="fa fa-gears" aria-hidden="true"></i>

                                <i class="fa fa-gift" aria-hidden="true"></i>

                                <i class="fa fa-glass" aria-hidden="true"></i>

                                <i class="fa fa-globe" aria-hidden="true"></i>

                                <i class="fa fa-graduation-cap" aria-hidden="true"></i>

                                <i class="fa fa-group" aria-hidden="true"></i>

                                <i class="fa fa-hand-grab-o" aria-hidden="true"></i>

                                <i class="fa fa-hand-lizard-o" aria-hidden="true"></i>

                                <i class="fa fa-hand-paper-o" aria-hidden="true"></i>

                                <i class="fa fa-hand-peace-o" aria-hidden="true"></i>

                                <i class="fa fa-hand-pointer-o" aria-hidden="true"></i>

                                <i class="fa fa-hand-rock-o" aria-hidden="true"></i>

                                <i class="fa fa-hand-scissors-o" aria-hidden="true"></i>

                                <i class="fa fa-hand-spock-o" aria-hidden="true"></i>

                                <i class="fa fa-hand-stop-o" aria-hidden="true"></i>

                                <i class="fa fa-handshake-o" aria-hidden="true"></i>

                                <i class="fa fa-hard-of-hearing" aria-hidden="true"></i>

                                <i class="fa fa-hashtag" aria-hidden="true"></i>

                                <i class="fa fa-hdd-o" aria-hidden="true"></i>

                                <i class="fa fa-headphones" aria-hidden="true"></i>

                                <i class="fa fa-heart" aria-hidden="true"></i>

                                <i class="fa fa-heart-o" aria-hidden="true"></i>

                                <i class="fa fa-heartbeat" aria-hidden="true"></i>

                                <i class="fa fa-history" aria-hidden="true"></i>

                                <i class="fa fa-home" aria-hidden="true"></i>

                                <i class="fa fa-hotel" aria-hidden="true"></i>

                                <i class="fa fa-hourglass" aria-hidden="true"></i>

                                <i class="fa fa-hourglass-1" aria-hidden="true"></i>

                                <i class="fa fa-hourglass-2" aria-hidden="true"></i>

                                <i class="fa fa-hourglass-3" aria-hidden="true"></i>

                                <i class="fa fa-hourglass-end" aria-hidden="true"></i>

                                <i class="fa fa-hourglass-half" aria-hidden="true"></i>

                                <i class="fa fa-hourglass-o" aria-hidden="true"></i>

                                <i class="fa fa-hourglass-start" aria-hidden="true"></i>

                                <i class="fa fa-i-cursor" aria-hidden="true"></i>

                                <i class="fa fa-id-badge" aria-hidden="true"></i>

                                <i class="fa fa-id-card" aria-hidden="true"></i>

                                <i class="fa fa-id-card-o" aria-hidden="true"></i>

                                <i class="fa fa-image" aria-hidden="true"></i>

                                <i class="fa fa-inbox" aria-hidden="true"></i>

                                <i class="fa fa-industry" aria-hidden="true"></i>

                                <i class="fa fa-info" aria-hidden="true"></i>

                                <i class="fa fa-info-circle" aria-hidden="true"></i>

                                <i class="fa fa-institution" aria-hidden="true"></i>

                                <i class="fa fa-key" aria-hidden="true"></i>

                                <i class="fa fa-keyboard-o" aria-hidden="true"></i>

                                <i class="fa fa-language" aria-hidden="true"></i>

                                <i class="fa fa-laptop" aria-hidden="true"></i>

                                <i class="fa fa-leaf" aria-hidden="true"></i>

                                <i class="fa fa-legal" aria-hidden="true"></i>

                                <i class="fa fa-lemon-o" aria-hidden="true"></i>

                                <i class="fa fa-level-down" aria-hidden="true"></i>

                                <i class="fa fa-level-up" aria-hidden="true"></i>

                                <i class="fa fa-life-bouy" aria-hidden="true"></i>

                                <i class="fa fa-life-buoy" aria-hidden="true"></i>

                                <i class="fa fa-life-ring" aria-hidden="true"></i>

                                <i class="fa fa-life-saver" aria-hidden="true"></i>

                                <i class="fa fa-lightbulb-o" aria-hidden="true"></i>

                                <i class="fa fa-line-chart" aria-hidden="true"></i>

                                <i class="fa fa-location-arrow" aria-hidden="true"></i>

                                <i class="fa fa-lock" aria-hidden="true"></i>

                                <i class="fa fa-low-vision" aria-hidden="true"></i>

                                <i class="fa fa-magic" aria-hidden="true"></i>

                                <i class="fa fa-magnet" aria-hidden="true"></i>

                                <i class="fa fa-mail-forward" aria-hidden="true"></i>

                                <i class="fa fa-mail-reply" aria-hidden="true"></i>

                                <i class="fa fa-mail-reply-all" aria-hidden="true"></i>

                                <i class="fa fa-male" aria-hidden="true"></i>

                                <i class="fa fa-map" aria-hidden="true"></i>

                                <i class="fa fa-map-marker" aria-hidden="true"></i>

                                <i class="fa fa-map-o" aria-hidden="true"></i>

                                <i class="fa fa-map-pin" aria-hidden="true"></i>

                                <i class="fa fa-map-signs" aria-hidden="true"></i>

                                <i class="fa fa-meh-o" aria-hidden="true"></i>

                                <i class="fa fa-microchip" aria-hidden="true"></i>

                                <i class="fa fa-microphone" aria-hidden="true"></i>

                                <i class="fa fa-microphone-slash" aria-hidden="true"></i>

                                <i class="fa fa-minus" aria-hidden="true"></i>

                                <i class="fa fa-minus-circle" aria-hidden="true"></i>

                                <i class="fa fa-minus-square" aria-hidden="true"></i>

                                <i class="fa fa-minus-square-o" aria-hidden="true"></i>

                                <i class="fa fa-mobile" aria-hidden="true"></i>

                                <i class="fa fa-mobile-phone" aria-hidden="true"></i>

                                <i class="fa fa-money" aria-hidden="true"></i>

                                <i class="fa fa-moon-o" aria-hidden="true"></i>

                                <i class="fa fa-mortar-board" aria-hidden="true"></i>

                                <i class="fa fa-motorcycle" aria-hidden="true"></i>

                                <i class="fa fa-mouse-pointer" aria-hidden="true"></i>

                                <i class="fa fa-music" aria-hidden="true"></i>

                                <i class="fa fa-navicon" aria-hidden="true"></i>

                                <i class="fa fa-newspaper-o" aria-hidden="true"></i>

                                <i class="fa fa-object-group" aria-hidden="true"></i>

                                <i class="fa fa-object-ungroup" aria-hidden="true"></i>

                                <i class="fa fa-paint-brush" aria-hidden="true"></i>

                                <i class="fa fa-paper-plane" aria-hidden="true"></i>

                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>

                                <i class="fa fa-paw" aria-hidden="true"></i>

                                <i class="fa fa-pencil" aria-hidden="true"></i>

                                <i class="fa fa-pencil-square" aria-hidden="true"></i>

                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>

                                <i class="fa fa-percent" aria-hidden="true"></i>

                                <i class="fa fa-phone" aria-hidden="true"></i>

                                <i class="fa fa-phone-square" aria-hidden="true"></i>

                                <i class="fa fa-photo" aria-hidden="true"></i>

                                <i class="fa fa-picture-o" aria-hidden="true"></i>

                                <i class="fa fa-pie-chart" aria-hidden="true"></i>

                                <i class="fa fa-plane" aria-hidden="true"></i>

                                <i class="fa fa-plug" aria-hidden="true"></i>

                                <i class="fa fa-plus" aria-hidden="true"></i>

                                <i class="fa fa-plus-circle" aria-hidden="true"></i>

                                <i class="fa fa-plus-square" aria-hidden="true"></i>

                                <i class="fa fa-plus-square-o" aria-hidden="true"></i>

                                <i class="fa fa-podcast" aria-hidden="true"></i>

                                <i class="fa fa-power-off" aria-hidden="true"></i>

                                <i class="fa fa-print" aria-hidden="true"></i>

                                <i class="fa fa-puzzle-piece" aria-hidden="true"></i>

                                <i class="fa fa-qrcode" aria-hidden="true"></i>

                                <i class="fa fa-question" aria-hidden="true"></i>

                                <i class="fa fa-question-circle" aria-hidden="true"></i>

                                <i class="fa fa-question-circle-o" aria-hidden="true"></i>

                                <i class="fa fa-quote-left" aria-hidden="true"></i>

                                <i class="fa fa-quote-right" aria-hidden="true"></i>

                                <i class="fa fa-random" aria-hidden="true"></i>

                                <i class="fa fa-recycle" aria-hidden="true"></i>

                                <i class="fa fa-refresh" aria-hidden="true"></i>

                                <i class="fa fa-registered" aria-hidden="true"></i>

                                <i class="fa fa-remove" aria-hidden="true"></i>

                                <i class="fa fa-reorder" aria-hidden="true"></i>

                                <i class="fa fa-reply" aria-hidden="true"></i>

                                <i class="fa fa-reply-all" aria-hidden="true"></i>

                                <i class="fa fa-retweet" aria-hidden="true"></i>

                                <i class="fa fa-road" aria-hidden="true"></i>

                                <i class="fa fa-rocket" aria-hidden="true"></i>

                                <i class="fa fa-rss" aria-hidden="true"></i>

                                <i class="fa fa-rss-square" aria-hidden="true"></i>

                                <i class="fa fa-s15" aria-hidden="true"></i>

                                <i class="fa fa-search" aria-hidden="true"></i>

                                <i class="fa fa-search-minus" aria-hidden="true"></i>

                                <i class="fa fa-search-plus" aria-hidden="true"></i>

                                <i class="fa fa-send" aria-hidden="true"></i>

                                <i class="fa fa-send-o" aria-hidden="true"></i>

                                <i class="fa fa-server" aria-hidden="true"></i>

                                <i class="fa fa-share" aria-hidden="true"></i>

                                <i class="fa fa-share-alt" aria-hidden="true"></i>

                                <i class="fa fa-share-alt-square" aria-hidden="true"></i>

                                <i class="fa fa-share-square" aria-hidden="true"></i>

                                <i class="fa fa-share-square-o" aria-hidden="true"></i>

                                <i class="fa fa-shield" aria-hidden="true"></i>

                                <i class="fa fa-ship" aria-hidden="true"></i>

                                <i class="fa fa-shopping-bag" aria-hidden="true"></i>

                                <i class="fa fa-shopping-basket" aria-hidden="true"></i>

                                <i class="fa fa-shopping-cart" aria-hidden="true"></i>

                                <i class="fa fa-shower" aria-hidden="true"></i>

                                <i class="fa fa-sign-in" aria-hidden="true"></i>

                                <i class="fa fa-sign-language" aria-hidden="true"></i>

                                <i class="fa fa-sign-out" aria-hidden="true"></i>

                                <i class="fa fa-signal" aria-hidden="true"></i>

                                <i class="fa fa-signing" aria-hidden="true"></i>

                                <i class="fa fa-sitemap" aria-hidden="true"></i>

                                <i class="fa fa-sliders" aria-hidden="true"></i>

                                <i class="fa fa-smile-o" aria-hidden="true"></i>

                                <i class="fa fa-snowflake-o" aria-hidden="true"></i>

                                <i class="fa fa-soccer-ball-o" aria-hidden="true"></i>

                                <i class="fa fa-sort" aria-hidden="true"></i>

                                <i class="fa fa-sort-alpha-asc" aria-hidden="true"></i>

                                <i class="fa fa-sort-alpha-desc" aria-hidden="true"></i>

                                <i class="fa fa-sort-amount-asc" aria-hidden="true"></i>

                                <i class="fa fa-sort-amount-desc" aria-hidden="true"></i>

                                <i class="fa fa-sort-asc" aria-hidden="true"></i>

                                <i class="fa fa-sort-desc" aria-hidden="true"></i>

                                <i class="fa fa-sort-down" aria-hidden="true"></i>

                                <i class="fa fa-sort-numeric-asc" aria-hidden="true"></i>

                                <i class="fa fa-sort-numeric-desc" aria-hidden="true"></i>

                                <i class="fa fa-sort-up" aria-hidden="true"></i>

                                <i class="fa fa-space-shuttle" aria-hidden="true"></i>

                                <i class="fa fa-spinner" aria-hidden="true"></i>

                                <i class="fa fa-spoon" aria-hidden="true"></i>

                                <i class="fa fa-square" aria-hidden="true"></i>

                                <i class="fa fa-square-o" aria-hidden="true"></i>

                                <i class="fa fa-star" aria-hidden="true"></i>

                                <i class="fa fa-star-half" aria-hidden="true"></i>

                                <i class="fa fa-star-half-empty" aria-hidden="true"></i>

                                <i class="fa fa-star-half-full" aria-hidden="true"></i>

                                <i class="fa fa-star-half-o" aria-hidden="true"></i>

                                <i class="fa fa-star-o" aria-hidden="true"></i>

                                <i class="fa fa-sticky-note" aria-hidden="true"></i>

                                <i class="fa fa-sticky-note-o" aria-hidden="true"></i>

                                <i class="fa fa-street-view" aria-hidden="true"></i>

                                <i class="fa fa-suitcase" aria-hidden="true"></i>

                                <i class="fa fa-sun-o" aria-hidden="true"></i>

                                <i class="fa fa-support" aria-hidden="true"></i>

                                <i class="fa fa-tablet" aria-hidden="true"></i>

                                <i class="fa fa-tachometer" aria-hidden="true"></i>

                                <i class="fa fa-tag" aria-hidden="true"></i>

                                <i class="fa fa-tags" aria-hidden="true"></i>

                                <i class="fa fa-tasks" aria-hidden="true"></i>

                                <i class="fa fa-taxi" aria-hidden="true"></i>

                                <i class="fa fa-television" aria-hidden="true"></i>

                                <i class="fa fa-terminal" aria-hidden="true"></i>

                                <i class="fa fa-thermometer" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-0" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-1" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-2" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-3" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-4" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-empty" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-full" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-half" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-quarter" aria-hidden="true"></i>

                                <i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i>

                                <i class="fa fa-thumb-tack" aria-hidden="true"></i>

                                <i class="fa fa-thumbs-down" aria-hidden="true"></i>

                                <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>

                                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>

                                <i class="fa fa-thumbs-up" aria-hidden="true"></i>

                                <i class="fa fa-ticket" aria-hidden="true"></i>

                                <i class="fa fa-times" aria-hidden="true"></i>

                                <i class="fa fa-times-circle" aria-hidden="true"></i>

                                <i class="fa fa-times-circle-o" aria-hidden="true"></i>

                                <i class="fa fa-times-rectangle" aria-hidden="true"></i>

                                <i class="fa fa-times-rectangle-o" aria-hidden="true"></i>

                                <i class="fa fa-tint" aria-hidden="true"></i>

                                <i class="fa fa-toggle-down" aria-hidden="true"></i>

                                <i class="fa fa-toggle-left" aria-hidden="true"></i>

                                <i class="fa fa-toggle-off" aria-hidden="true"></i>

                                <i class="fa fa-toggle-on" aria-hidden="true"></i>

                                <i class="fa fa-toggle-right" aria-hidden="true"></i>

                                <i class="fa fa-toggle-up" aria-hidden="true"></i>

                                <i class="fa fa-trademark" aria-hidden="true"></i>

                                <i class="fa fa-trash" aria-hidden="true"></i>

                                <i class="fa fa-trash-o" aria-hidden="true"></i>

                                <i class="fa fa-tree" aria-hidden="true"></i>

                                <i class="fa fa-trophy" aria-hidden="true"></i>

                                <i class="fa fa-truck" aria-hidden="true"></i>

                                <i class="fa fa-tty" aria-hidden="true"></i>

                                <i class="fa fa-tv" aria-hidden="true"></i>

                                <i class="fa fa-umbrella" aria-hidden="true"></i>

                                <i class="fa fa-universal-access" aria-hidden="true"></i>

                                <i class="fa fa-university" aria-hidden="true"></i>

                                <i class="fa fa-unlock" aria-hidden="true"></i>

                                <i class="fa fa-unlock-alt" aria-hidden="true"></i>

                                <i class="fa fa-unsorted" aria-hidden="true"></i>

                                <i class="fa fa-upload" aria-hidden="true"></i>

                                <i class="fa fa-user" aria-hidden="true"></i>

                                <i class="fa fa-user-circle" aria-hidden="true"></i>

                                <i class="fa fa-user-circle-o" aria-hidden="true"></i>

                                <i class="fa fa-user-o" aria-hidden="true"></i>

                                <i class="fa fa-user-plus" aria-hidden="true"></i>

                                <i class="fa fa-user-secret" aria-hidden="true"></i>

                                <i class="fa fa-user-times" aria-hidden="true"></i>

                                <i class="fa fa-users" aria-hidden="true"></i>

                                <i class="fa fa-vcard" aria-hidden="true"></i>

                                <i class="fa fa-vcard-o" aria-hidden="true"></i>

                                <i class="fa fa-video-camera" aria-hidden="true"></i>

                                <i class="fa fa-volume-control-phone" aria-hidden="true"></i>

                                <i class="fa fa-volume-down" aria-hidden="true"></i>

                                <i class="fa fa-volume-off" aria-hidden="true"></i>

                                <i class="fa fa-volume-up" aria-hidden="true"></i>

                                <i class="fa fa-warning" aria-hidden="true"></i>

                                <i class="fa fa-wheelchair" aria-hidden="true"></i>

                                <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>

                                <i class="fa fa-wifi" aria-hidden="true"></i>

                                <i class="fa fa-window-close" aria-hidden="true"></i>

                                <i class="fa fa-window-close-o" aria-hidden="true"></i>

                                <i class="fa fa-window-maximize" aria-hidden="true"></i>

                                <i class="fa fa-window-minimize" aria-hidden="true"></i>

                                <i class="fa fa-window-restore" aria-hidden="true"></i>

                                <i class="fa fa-wrench" aria-hidden="true"></i>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<div class="form-group">
    <label class="col-sm-3 control-label">菜单状态：</label>
    <div class="col-sm-3">
        <label class="radio-box"> <input type="radio" name="visible1" value="0" v-model="menu.visible" checked/> 显示 </label>
        <label class="radio-box"> <input type="radio"  name="visible1"  value="1" v-model="menu.visible" /> 隐藏 </label>
    </div>
    <label class="col-sm-2 control-label is-refresh" title="打开菜单选项卡是否刷新页面">是否刷新：<i class="fa fa-question-circle-o"></i></label>
    <div class="col-sm-3 is-refresh">
        <div class="radio-box">
            <input type="radio" id="refresh-no" name="isRefresh" value="1" v-model="menu.isRefresh">
            <label for="refresh-no">否</label>
        </div>
        <div class="radio-box">
            <input type="radio" id="refresh-yes" name="isRefresh" value="0" v-model="menu.isRefresh">
            <label for="refresh-yes">是</label>
        </div>
    </div>
</div>
</form>
</div>
    <div id="treeView" style="display: none">
        <div class="wrapper"><div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
            <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
            <label id="btnHide" title="隐藏搜索">︽</label>
        </div>
            <div class="treeSearchInput" id="search">
                <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
                <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索 </button>
            </div>
            <div class="treeExpandCollapse">
                <a href="#" onclick="$.tree.expand()">展开</a> /
                <a href="#" onclick="$.tree.collapse()">折叠</a>
            </div>
            <div id="tree" class="ztree treeselect"></div>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el:'#container',
        data:{
            datas:[],
            param:{
                visible:'',
            },
            types:[
                {id:'M',name:'目录'},
                {id:'C',name:'菜单'},
                {id:'F',name:'按钮'}],
            menu:{
                menuName:'',
                menuType:'M',
                parentId:'',
                parentName:'',
                menuId:'',
                visible:0,
                isRefresh:1

            },
            flag:true
        },
        methods:{
            edit:function(id){
                $.operate.getNoAlert('/system/menu/info/'+id,function(ret){
                    vm.menu=ret.data;
                    $.operate.edit(0,'addForm',doSubmit);
                });

            },
            add:function(){
                vm.menu={};
                $.operate.edit(0,'addForm',doSubmit);
            },
            selectMenuTree:function(){
                var url =  "/system/menu/menuTreeData";
                var options = {
                    url: url,
                    expandLevel: 1,
                    onClick: function(event, treeId, treeNode){
                        vm.menu.parentId = treeNode.id;
                        vm.menu.parentName = treeNode.name;
                    }
                };
                $.tree.init(options);
                $.operate.editPanel(0,'treeView',"菜单选择",380);
            }
        },
        mounted(){
                init();
        }
    });

    function edit_(id){
        $.operate.getNoAlert('/system/menu/info/'+id,function(ret){
            let obj = ret.data;
            vm.menu=obj;
            if(ret.data.parent!=null){
                vm.menu.parentName = ret.data.parent.menuName;
                vm.menu.parentId = ret.data.parent.menuId;
            }
            $.operate.edit(0,'addForm',doSubmit);
        });

    }
    function deleteById(id){
        layer.confirm("确定删除当前菜单吗？",function(){
            $.operate.delete('/system/menu/delete/'+id);
        });
    }
    function addChild(id,name){
        vm.menu={};
        vm.menu.parentId=id;
        vm.menu.parentName = name;
        $.operate.edit(0,'addForm',doSubmit);
    }
    function init(){
    var addFlag = false;
    addFlag=true;
    var editFlag = false;
    addFlag=true;
    var removeFlag = false;
    addFlag=true;
    var datas =[];
    var prefix =  "/system/menu";

        var options = {
            code: "menuId",
            parentCode: "parentId",
            uniqueId: "menuId",
            expandAll: false,
            type:'1',
            expandFirst: false,
            url: prefix + "/data",
            modalName: "菜单",
            responseHandler:function(ret){
              return ret.data.records;
            },
            columns: [{
                field: 'selectItem',
                radio: true
            },
                {
                    title: '菜单名称',
                    field: 'menuName',
                    width: '20',
                    widthUnit: '%',
                    formatter: function(value, row, index) {
                        if ($.common.isEmpty(row.icon)) {
                            return row.menuName;
                        } else {
                            return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
                        }
                    }
                },
                {
                    field: 'orderNum',
                    title: '排序',
                    width: '10',
                    widthUnit: '%',
                    align: "left"
                },
                {
                    field: 'url',
                    title: '请求地址',
                    width: '15',
                    widthUnit: '%',
                    align: "left",
                    formatter: function(value, row, index) {
                        return $.table.tooltip(value);
                    }
                },
                {
                    title: '类型',
                    field: 'menuType',
                    width: '10',
                    widthUnit: '%',
                    align: "left",
                    formatter: function(value, item, index) {
                        if (item.menuType == 'M') {
                            return '<span class="label label-success">目录</span>';
                        }
                        else if (item.menuType == 'C') {
                            return '<span class="label label-primary">菜单</span>';
                        }
                        else if (item.menuType == 'F') {
                            return '<span class="label label-warning">按钮</span>';
                        }
                    }
                },
                {
                    field: 'visible',
                    title: '可见',
                    width: '10',
                    widthUnit: '%',
                    align: "left",
                    formatter: function(value, row, index) {
                        if (row.menuType == 'F') {
                            return '-';
                        }
                        return $.table.selectDictLabel(datas, row.visible);
                    }
                },
                {
                    field: 'perms',
                    title: '权限标识',
                    width: '15',
                    widthUnit: '%',
                    align: "left",
                    formatter: function(value, row, index) {
                        return $.table.tooltip(value);
                    }
                },
                {
                    title: '操作',
                    width: '20',
                    widthUnit: '%',
                    align: "left",
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="edit_(\'' + row.menuId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-info btn-xs ' + addFlag + '" href="javascript:void(0)" onclick="addChild(\'' + row.menuId + '\',\''+row.menuName+'\')"><i class="fa fa-plus"></i>新增</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="deleteById(\'' + row.menuId + '\')"><i class="fa fa-trash"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.treeTable.init(options);
    }

    $(function(){
        $("input[name='icon']").focus(function() {
            $(".icon-drop").show();
        });
        $("#form-menu-add").click(function(event) {
            var obj = event.srcElement || event.target;
            if (!$(obj).is("input[name='icon']")) {
                $(".icon-drop").hide();
            }
        });
        $(".icon-drop").find(".ico-list i").on("click", function() {
            $('#icon').val($(this).attr('class'));
        });
    })

    function doSubmit(){
        $.operate.post("/system/menu/save",JSON.stringify(vm.menu),function(ret){
            layer.closeAll();
        });
    }
</script>
</body>
</html>
